<template lang="html">
  <div class="feedback" id="">
    <h2 v-title="'意见反馈'"></h2>
    <div class="feedbackCon">
      <textarea name="name" rows="8"
      v-model="information"
      placeholder="请描述您想要对我们提出的建议，不少于15字">

      </textarea>
      <p>
        <em>{{letterLength}}</em>/200
      </p>
    </div>
    <div class="serverTel">
      <img src="@/assets/images/phone@2x.png" alt="">
      {{userInfo.mobile}}
    </div>

    <div class="fixedBottom">
      <button type="button" name="button" class="blockBtn" @click="submit">提交</button>
    </div>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex';
import { Toast, MessageBox } from 'mint-ui';
export default {
  name:'feedback',
  data:() => ({
    information:'',
  }),
  computed:{
    ...mapState({
      servicePhone:state=>state.login.servicePhone,
      userInfo:state=>state.login.userInfo,
    }),
    letterLength(){
      return this.information.length;
    }
  },
  methods:{
    submit(){
      console.log(this.information.length);
      let that = this;
      if(that.information==''){
        Toast('请输入您的宝贵建议');
        return false;
      }
      if(that.information.length>200){
        Toast('请控制在200字以内');
        return false;
      }
      let informationParam = {
        information:that.information
      }
      network.post(configUrl.FEEDBACK_URL,informationParam,function(res){
        console.log(res);
        if(res.code==401) {
          reLoginWX();
        }else{
        MessageBox.alert('我们已收到您的宝贵意见，会尽快处理，谢谢~').then(actions=>{
          that.$router.go(-1);
        })
      }
      },function(err){
        console.log(err);
      });
    }
  },
  mounted() {
    let that = this;
    // let userInfo = window.localStorage.getItem('userInfo');
    console.log(that.userInfo);
  }
}
</script>

<style lang="scss">
@import "@/main.scss";
.feedback{
  background: $eeeColor;
  padding-bottom: 20px;
  font-size: 1rem;
}
.feedbackCon{
  background: white;
  margin-bottom: 20px;
  textarea{
    width: 96%;
    border: none;
    padding:10px 2%;
    font-size: 1rem;
  }
  p{
    text-align: right;
    color: $grayColor;
    line-height: 2rem;
    padding: 0 10px;
  }
}
.serverTel{
  background: white;
  padding:10px;
  img{
    width: 20px;
    margin-left: 10px;
  }

}
</style>
